<template>
  <div class="area">
    <div class="center">
      <!-- 上部 -->
      <div class="areaTop">
        <div class="title">
          <h1>{{ city.prov }}·{{ city.city }}</h1>
          <span>{{ city.lovend }}</span>
        </div>
        <div class="desc">
          <p>
            {{ city.detail }}
          </p>
          <span><i class="el-icon-arrow-down"></i></span>
        </div>
      </div>

      <!-- 搜索区 -->
      <div class="search" id="search">
        <div class="sear-top">
          <div class="sear-left">
            <el-autocomplete placeholder="您想吃点什么？" class="inline-input" v-model="autoInput"
              :fetch-suggestions="querySearch" @input="inputSearch" @change="getIuput(autoInput)"
              @select="getIuput(autoInput)"></el-autocomplete>
            <el-select placeholder="城市" class="select" v-model="cities.city">
              <el-option v-for="(c, i) in cities" :key="i" :value="c.city">
              </el-option>
            </el-select>
            <el-select placeholder="品类" class="select" v-model="kinds.kind" @change="getSearch()">
              <el-option v-for="(k, i) in kinds" :key="i" :value="k.kind">
              </el-option>
            </el-select>
            <el-select placeholder="口味" class="select" v-model="taste.taste" @change="getSearch()">
              <el-option v-for="(t, i) in taste" :key="i" :value="t.taste">
              </el-option>
            </el-select>
          </div>
          <div class="sear-right">
            <ul>
              <li><span>热门搜索:</span></li>
              <li><a href="">凉粉</a></li>
              <li><a href="">糕点</a></li>
              <li><a href="">面点</a></li>
              <li><a href="">酱油</a></li>
              <li><a href="">麻花</a></li>
            </ul>
          </div>
        </div>
        <div class="sear-bot">
          <template v-if="search">
            <sub-search v-for="(x, i) in search" :key="i" :item="x" />
          </template>
          <template v-else-if="searchData">
            <sub-search v-for="(x, i) in searchData" :key="i" :item="x" />
          </template>
          <template v-else>
            <div class="subject-item">
              <h3>
                <a href="">未收录</a>
              </h3>
              <a href=""> <img src="../../public/gdgz-shmf1.jpeg" alt="" /></a>
              <img class="prize" src="../../public/4.png" alt="" />
              <p>暂无此 类/区域 美食收录</p>
            </div>
          </template>
        </div>
      </div>

      <!-- 底部 -->
      <div class="sub-bot" id="sub-bot">
        <el-row :gutter="32" class="bot-row1">
          <el-col :span="8">
            <div class="row1-1">
              <img src="../../public/017a3e8bc6ad8f92414e.jpeg" alt="" />
              <div class="bot-loca">
                <a href="">
                  <span class="el-icon-location-outline"></span>
                  <p>{{ $route.query.city }}</p>
                </a>
              </div>
            </div>
          </el-col>
          <el-col :span="16">
            <div class="row1-2">
              <el-carousel :interval="5000" trigger="click" height="350px">
                <el-carousel-item>
                  <img style="width: 100%; height: 100%" src="../../public/e60b66ea966fb489bff4.jpeg" alt="" />
                </el-carousel-item>
                <el-carousel-item>
                  <img style="width: 100%; height: 100%" src="../../public/e60b66ea966fb489bff4.jpeg" alt="" />
                </el-carousel-item>
                <el-carousel-item>
                  <img style="width: 100%; height: 100%" src="../../public/e60b66ea966fb489bff4.jpeg" alt="" />
                </el-carousel-item>
              </el-carousel>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="32" class="bot-row2">
          <el-col :span="6">
            <div class="adv">
              <img src="image/宠物医院.png" alt="" />
              <p>广告位</p>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="adv">
              <img src="image/国家图书馆.png" alt="" />
              <p>广告位</p>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="adv">
              <img src="image/驾考宝典.png" alt="" />
              <p>广告位</p>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="adv">
              <img src="../../public/bf6f91c38757d1ef2a25.jpeg" alt="" />
              <p>广告位</p>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import SubSearch from "@/components/SubSearch.vue";

export default {
  components: { SubSearch },
  data() {
    return {
      kinds: [],
      cities: [],
      taste: [],
      search: [],
      autoInput: "",
      searchData: [],
      inputData: [],
      city: "",
    };
  },
  methods: {
    getCity() {
      let city = this.$route.query.city;
      this.axios.get(`index/city_detail?city=${city}`).then((res) => {
        //console.log(res);
        this.city = res.data.data[0];
      });
    },
    getFood() {
      this.axios.get("index/search?prov=四川").then((res) => {
        // console.log(res);
        this.cities = res.data.data.cities;
        this.kinds = res.data.data.kinds;
        this.kinds.unshift({ kind: "所有" });
        this.taste = res.data.data.taste;
        this.taste.unshift({ taste: "所有" });
      });
    },

    getSearch() {
      let p1 = this.kinds.kind;
      let p2 = this.taste.taste;
      if (p1 == undefined) p1 = "";
      if (p2 == undefined) p2 = "";
      let url = `index/search_taste?`;

      if (p1 != "" && p1 != "所有" && p2 == "") {
        this.axios.get(`${url}kind=${p1}`).then((res) => {
          //console.log(res);
          this.search = res.data.data;
        });
      } else if (p2 != "" && p2 != "所有" && p1 == "") {
        this.axios.get(`${url}taste=${p2}`).then((res) => {
          //console.log(res);
          this.search = res.data.data;
        });
      } else if (p1 == "所有" || p2 == "所有") {
        this.axios.get(url).then((res) => {
          //console.log(res);
          this.search = res.data.data.slice(0, 9);
        });
      } else {
        this.axios.get(`${url}taste=${p2}&kind=${p1}`).then((res) => {
          //console.log(res);
          this.search = res.data.data;
        });
      }
    },
    inputSearch(food) {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        //console.log(this.autoInput);
        this.axios.get(`index/searchFood?food=${food}`).then((res) => {
          this.searchData = res.data.data;
        });
      }, 2000);
    },

    getIuput(food = "") {
      this.axios.get(`index/searchFood?food=${food}`).then((res) => {
        if (res.data.code == 200) {
          this.searchData = "";
          this.search = "";
        } else {
          this.searchData = res.data.data.slice(0, 6);
          // console.log(this.searchData);
          this.inputData = res.data.data;
          //console.log(this.inputData);
        }
      });
    },
    querySearch(query, cb) {
      var inputData = this.inputData.map((v, i) => {
        return {
          value: v.name,
          index: i,
        };
      });
      //console.log(inputData);
      var results = query
        ? inputData.filter(this.createFilter(query))
        : inputData;

      cb(results);
    },
    createFilter(query) {
      return (inputData) => {
        return inputData.value.toLowerCase().indexOf(query.toLowerCase()) === 0;
      };
    },
    handleSelect(item) {
      // console.log(item);
    },
  },
  mounted() {
    this.getFood();
    this.getIuput();
    this.getCity();
  },

  watch: {
    search() {
      if (this.search.length !== 0) {
        this.searchData = "";
        this.autoInput = "";
      }
    },
    searchData() {
      if (this.searchData.length !== 0) {
        this.search = "";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.area {
  background: url("../../public/bgshgd123.jpeg") center -260px;

  .center {
    margin: 0 auto;
    padding: 62px 64px;
  }

  .areaTop {
    color: #fff;
    text-align: center;

    .title {
      padding: 40px;
      position: relative;

      h1 {
        font-family: serif;
        font-size: 60px;
        letter-spacing: 6px;
      }

      span {
        display: block;
        font-size: 20px;
        margin-top: 32px;
      }
    }

    .title::before,
    .title::after {
      content: "";
      background-color: #fff;
      width: 70px;
      height: 5px;
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translate(-50%);
    }

    .title::after {
      top: 0;
    }

    .desc {
      padding: 96px;

      p {
        font-size: 20px;
        font-weight: 600;
      }

      .el-icon-arrow-down {
        font-size: 48px;
        animation: upDown 1.5s linear infinite;
      }
    }
  }

  @keyframes upDown {
    0% {
      transform: translateY(30px);
    }

    50% {
      transform: translateY(10px);
    }

    100% {
      transform: translateY(30px);
    }
  }

  // 搜索
  .search {
    margin: 80px 0;
    background-color: #fff;

    .sear-top {
      padding: 24px 32px;
      margin: 20px 20px 0;
      font-size: 16px;
      display: flex;
      justify-content: space-evenly;
      border-bottom: 1px solid rgba(150, 134, 134, 0.4);

      .sear-left {
        display: flex;
        width: 55%;
        font-size: 16px;

        .input {
          width: 200px;
          font-size: 16px;
        }

        .select {
          width: 100px;
          font-size: 16px;
        }
      }

      .sear-right {
        width: 45%;
        line-height: 40px;

        ul {
          display: flex;
          list-style: none;
          justify-content: space-between;

          a {
            text-decoration: none;
            color: #000;
          }
        }

        span {
          font-weight: 600;
        }
      }
    }

    .sear-bot {
      padding: 32px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;

      .subject-item {
        margin: 0 20px 40px;
        width: 29.2%;
        text-align: center;
        position: relative;

        a {
          text-decoration: none;
        }

        img {
          width: 100%;
          margin: 20px 0;
          height: 250px;
        }

        .prize {
          width: 48px;
          height: 48px;
          position: absolute;
          right: 7%;
          top: 12%;
        }

        h3>a {
          font-size: 24px;
          letter-spacing: 0.5rem;
          color: #4b5563;
        }

        p {
          // 将对象作为弹性伸缩盒子模型显示
          display: -webkit-box;
          // 设置或检索伸缩盒对象的子元素的排列方式
          -webkit-box-orient: vertical;
          //  指定几行
          -webkit-line-clamp: 4;
          overflow: hidden;
        }
      }
    }

    .sear-bot::after {
      content: "";
      flex: auto;
    }
  }

  //底部
  .sub-bot {
    background-color: #fff;
    padding: 32px;

    .el-row {
      margin-bottom: 32px;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .bot-row1 {
      .row1-1 {
        position: relative;
        text-align: center;
        height: 350px;
        overflow: hidden;

        >img {
          height: 450px;
          width: 100%;
        }

        .bot-loca {
          width: 120px;
          height: 120px;
          background-color: rgba(255, 255, 255, 0.8);
          border-radius: 10px;
          position: absolute;
          right: 0;
          bottom: 0;
          top: 0;
          left: 0;
          margin: auto;
          line-height: 120px;

          a {
            text-decoration: none;
            color: #000;

            span {
              font-size: 48px;
            }

            p {
              margin-top: -80%;
            }
          }
        }
      }
    }

    .bot-row2 {
      .adv {
        position: relative;

        >img {
          width: 100%;
        }

        p {
          backdrop-filter: blur(5px);
          background-color: rgba(255, 255, 255, 0.7);
          padding: 12px 0;
          position: absolute;
          bottom: 0;
          width: 100%;
          text-align: center;
        }
      }
    }
  }
}
</style>

<style lang="scss">
#search.el-input.is-active .el-input__inner,
.el-input__inner:focus,
.el-select .el-input__inner:focus,
#search.el-range-editor.is-active,
.el-range-editor.is-active:hover,
.el-select .el-input.is-focus .el-input__inner {
  border-color: #f87171;
}

.el-select-dropdown__item.selected {
  color: #f87171;
}

.el-carousel__indicator--horizontal .el-carousel__button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.el-carousel__arrow {
  font-size: 20px;
}
</style>
